<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">
    
    <ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">Sticky</h1>
        <div class="entry">
            <p>Sticky component positions other components as fixed so that these components stay in window viewport during scrolling. In this example, toolbar component
            made sticky so it is always visible during page scroll.</p>
            
            <p:toolbar id="tb">
                <p:toolbarGroup align="left">
                    <p:commandButton type="button" value="New" icon="ui-icon-document" />

                    <p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/>

                    <p:separator />

                    <p:commandButton type="button" title="Save" icon="ui-icon-disk"/>
                    <p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>
                    <p:commandButton type="button" title="Print" icon="ui-icon-print"/>
                </p:toolbarGroup>
            </p:toolbar>

            <p:sticky target="tb" />

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="sticly.xhtml">
                    <pre name="code" class="xml">
&lt;p:toolbar id="tb"&gt;
    &lt;p:toolbarGroup align="left"&gt;
        &lt;p:commandButton type="button" value="New" icon="ui-icon-document" /&gt;

        &lt;p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/&gt;

        &lt;p:separator /&gt;

        &lt;p:commandButton type="button" title="Save" icon="ui-icon-disk"/&gt;
        &lt;p:commandButton type="button" title="Delete" icon="ui-icon-trash"/&gt;
        &lt;p:commandButton type="button" title="Print" icon="ui-icon-print"/&gt;
    &lt;/p:toolbarGroup&gt;
&lt;/p:toolbar&gt;

&lt;p:sticky target="tb" /&gt;
                    </pre>
                </p:tab>
            </p:tabView>

        </div>

    </ui:define>
</ui:composition>
